<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <!-- 

                    在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
                  -->
    <!--
        怪异盒模型：
        一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值） -->
    <!-- 2、怪异盒模型CSS3的box-sizingbox-sizing语法：box-sizing: content-box || border-box || inherit || initial当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；当设置为box-sizing:border-box时，将采用怪异模式解析计算；

            总结：标准盒模型增加了padding属性或者增加border的宽度，盒子会变大；怪异盒模型增加了padding或者border的宽度，盒子大小不会变化。 -->

</body>

</html>